Тестване на производителността на фронтенда: Интегриране на Lighthouse CI за непрекъснато подобрение

В днешния дигитален свят производителността на уебсайтовете е от първостепенно значение. Бавното зареждане, проблемите с достъпността и лошото SEO могат значително да повлияят на потребителското изживяване и съответно на бизнес резултатите. Тестването на производителността на фронтенда се е превърнало в съществена част от съвременния жизнен цикъл на разработка на софтуер, като гарантира, че уебсайтовете и уеб приложенията са бързи, надеждни и лесни за използване от глобална аудитория. Тази статия разглежда интегрирането на Lighthouse CI, мощен инструмент с отворен код, във вашия процес на непрекъсната интеграция (CI), за да автоматизирате тестването на производителността на фронтенда и да насърчите непрекъснатото подобрение.

Защо е важно тестването на производителността на фронтенда?

Преди да се потопим в Lighthouse CI, нека разберем защо тестването на производителността на фронтенда е от решаващо значение:

• Потребителско изживяване: Бързият и отзивчив уебсайт осигурява по-добро потребителско изживяване, което води до повишена ангажираност и по-ниски нива на отпадане. Представете си потенциален клиент в Токио, Япония, който се опитва да закупи продукт от бавно зареждащ се сайт за електронна търговия. Вероятно той ще напусне сайта и ще потърси алтернативи.
• SEO класиране: Търсачки като Google считат скоростта и производителността на уебсайта за фактори при класиране. По-бързите уебсайтове обикновено се класират по-високо в резултатите от търсенето, привличайки повече органичен трафик. Инициативата на Google Core Web Vitals подчертава значението на фактори като Largest Contentful Paint (LCP), First Input Delay (FID) и Cumulative Layout Shift (CLS) за SEO.
• Достъпност: Подобренията в производителността често водят до по-добра достъпност за потребители с увреждания. Оптимизираният код и изображения могат да подобрят изживяването за потребители, разчитащи на екранни четци, или за тези с ограничен интернет трафик.
• Коефициенти на конверсия: По-бързият уебсайт може пряко да повлияе на коефициентите на конверсия. Проучвания показват, че дори едносекундно забавяне при зареждането на страница може да доведе до значително намаляване на конверсиите. Помислете за потребител в Мумбай, Индия, който се опитва да резервира полет. Бавният процес на резервация може да го накара да се откаже от покупката и да избере конкурент.
• Оптимизация на ресурсите: Тестването на производителността помага да се идентифицират области, в които ресурсите могат да бъдат оптимизирани, което води до спестяване на разходи по отношение на сървърна инфраструктура и използване на честотна лента.

Представяне на Lighthouse CI

Lighthouse CI е автоматизиран инструмент с отворен код, създаден да се интегрира безпроблемно с вашия CI/CD процес. Той изпълнява Lighthouse, популярен инструмент за одит, разработен от Google, и предоставя информация за производителността, достъпността, SEO, най-добрите практики и съответствието с Progressive Web App (PWA) на вашия уебсайт. Lighthouse CI ви помага да:

• Автоматизирате одитите на производителността: Изпълнявайте одити на Lighthouse автоматично с всеки къмит или pull request.
• Проследявате производителността във времето: Наблюдавайте метриките за производителност във времето и идентифицирайте регресии на ранен етап.
• Задавате бюджети за производителност: Дефинирайте бюджети за производителност и проваляйте билдовете, ако те бъдат надвишени.
• Интегрирате със CI/CD системи: Интегрирайте с популярни CI/CD системи като GitHub Actions, GitLab CI, CircleCI и Jenkins.
• Си сътрудничите по проблеми с производителността: Споделяйте доклади от Lighthouse и си сътрудничете с екипа си за разрешаване на проблеми с производителността.

Настройка на Lighthouse CI

Ето ръководство стъпка по стъпка за настройка на Lighthouse CI във вашия проект:

1. Инсталирайте Lighthouse CI

Инсталирайте Lighthouse CI CLI глобално, като използвате npm или yarn:

            npm install -g @lhci/cli
yarn global add @lhci/cli
            

              
                Copy
              
            
          

2. Конфигурирайте Lighthouse CI

Създайте файл lighthouserc.js в основната директория на вашия проект, за да конфигурирате Lighthouse CI. Ето примерна конфигурация:

            module.exports = {
  ci:
{
    collect:
{
      url: ['http://localhost:3000', 'http://localhost:3000/about'],
      startServerCommand: 'npm start',
      numberOfRuns: 3,
    },
    assert:
{
      assertions:
{
        'categories:performance': ['warn', { minScore: 0.9 }],
        'categories:accessibility': ['error', { minScore: 1 }],
        'categories:best-practices': ['warn', { minScore: 0.9 }],
        'categories:seo': ['warn', { minScore: 0.9 }],
        'categories:pwa': ['off'],
        'first-contentful-paint': ['warn', { maxNumericValue: 2500 }],
        'largest-contentful-paint': ['warn', { maxNumericValue: 4000 }],
        'total-blocking-time': ['warn', { maxNumericValue: 200 }],
        'cumulative-layout-shift': ['warn', { maxNumericValue: 0.1 }],
      },
    },
    upload:
{
      target: 'temporary-redirect',
    },
  },
};

            

              
                Copy
              
            
          

Нека разгледаме тази конфигурация в детайли:

• collect.url: Масив от URL адреси за одит. Този пример одитира началната страница и страницата „За нас“. Трябва да включите всички критични страници на вашия уебсайт, като вземете предвид различните случаи на употреба. Например, сайт за електронна търговия може да включва начална страница, страници със списъци с продукти, страници с детайли за продукти и процеса на плащане.
• collect.startServerCommand: Командата за стартиране на вашия сървър за разработка. Това е необходимо, ако Lighthouse CI трябва да се изпълни спрямо локална среда за разработка.
• collect.numberOfRuns: Броят пъти, в които да се изпълняват одитите на Lighthouse за всеки URL. Изпълнението на няколко одита помага да се смекчат вариациите в мрежовите условия и други фактори.
• assert.assertions: Набор от твърдения за валидиране на резултатите от одита на Lighthouse. Всяко твърдение указва метрика или категория и праг. Ако прагът не е достигнат, билдът ще се провали. Този пример задава прагове за категориите производителност, достъпност, най-добри практики и SEO. Той също така задава прагове за конкретни метрики като First Contentful Paint (FCP), Largest Contentful Paint (LCP), Total Blocking Time (TBT) и Cumulative Layout Shift (CLS).
• upload.target: Указва къде да се качват докладите на Lighthouse. temporary-redirect качва докладите на временно място за съхранение и предоставя URL за достъп до тях. Други опции включват използване на сървъра на Lighthouse CI или решения за облачно съхранение като Google Cloud Storage или Amazon S3.

3. Интегрирайте с вашата CI/CD система

Следващата стъпка е да интегрирате Lighthouse CI във вашия CI/CD процес. Ето пример как да го интегрирате с GitHub Actions:

Създайте файл .github/workflows/lighthouse.yml във вашето хранилище:

            name: Lighthouse CI

on:
  push:
    branches: [main]
  pull_request:

jobs:
  lighthouse:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
        with:
          node-version: '16'
      - name: Install Dependencies
        run: npm ci
      - name: Run Lighthouse CI
        run: |          npm run build
          lhci autorun

            

              
                Copy
              
            
          

Този работен процес извършва следните стъпки:

• Изтегля кода (checkout).
• Настройва Node.js.
• Инсталира зависимостите.
• Изпълнява Lighthouse CI. Тази стъпка първо билдва приложението (npm run build), след което изпълнява lhci autorun, което стартира одитите на Lighthouse и сверява резултатите спрямо конфигурираните прагове.

Адаптирайте този работен процес към вашата конкретна CI/CD система и изисквания на проекта. Например, ако използвате GitLab CI, ще конфигурирате файл .gitlab-ci.yml с подобни стъпки.

4. Изпълнете Lighthouse CI

Къмитнете промените си и ги изпратете към вашето хранилище. CI/CD процесът автоматично ще изпълни Lighthouse CI. Ако някое от твърденията се провали, билдът ще се провали, предоставяйки ценна обратна връзка на разработчиците. Докладите на Lighthouse CI ще бъдат достъпни на URL адреса, предоставен от CI/CD системата.

Разширена конфигурация и персонализация

Lighthouse CI предлага широка гама от опции за конфигурация и възможности за персонализация. Ето някои разширени функции:

1. Използване на сървъра на Lighthouse CI

Сървърът на Lighthouse CI предоставя централизирано табло за проследяване на метрики за производителност във времето, управление на проекти и сътрудничество по проблеми с производителността. За да използвате сървъра на Lighthouse CI, трябва да настроите инстанция и да конфигурирате вашия файл lighthouserc.js да качва докладите на сървъра.

Първо, разположете сървъра. Има различни налични опции за разполагане, включително Docker, Heroku и облачни доставчици като AWS и Google Cloud. Обърнете се към документацията на Lighthouse CI за подробни инструкции относно разполагането на сървъра.

След като сървърът работи, актуализирайте вашия файл lighthouserc.js, за да сочи към сървъра:

            module.exports = {
  ci:
{
    collect: {
      url: ['http://localhost:3000'],
      startServerCommand: 'npm start',
    },
    assert: {
      assertions: {
        'categories:performance': ['warn', { minScore: 0.9 }],
      },
    },
    upload:
{
      target: 'lhci',
      serverBaseUrl: 'YOUR_LHCI_SERVER_URL',
      token: 'YOUR_LHCI_SERVER_TOKEN',
    },
  },
};

            

              
                Copy
              
            
          

Заменете YOUR_LHCI_SERVER_URL с URL адреса на вашия Lighthouse CI сървър и YOUR_LHCI_SERVER_TOKEN с токен, генериран от сървъра. Токенът удостоверява вашия CI процес пред сървъра.

2. Задаване на бюджети за производителност

Бюджетите за производителност определят приемливи прагове за конкретни метрики. Lighthouse CI ви позволява да задавате бюджети за производителност и да проваляте билдове, ако тези бюджети са надвишени. Това помага да се предотвратят регресии в производителността и гарантира, че вашият уебсайт остава в рамките на приемливи граници.

Можете да дефинирате бюджети за производителност във вашия файл lighthouserc.js, като използвате свойството assert.assertions. Например, за да зададете бюджет за производителност за First Contentful Paint (FCP), можете да добавите следното твърдение:

            'first-contentful-paint': ['warn', { maxNumericValue: 2500 }],
            

              
                Copy
              
            
          

Това твърдение ще провали билда, ако FCP е по-голямо от 2500 милисекунди.

3. Персонализиране на конфигурацията на Lighthouse

Lighthouse CI ви позволява да персонализирате конфигурацията на Lighthouse, за да отговаря на вашите специфични нужди. Можете да конфигурирате различни настройки на Lighthouse, като например:

• onlyAudits: Посочете списък с одити, които да се изпълнят.
• skipAudits: Посочете списък с одити, които да се пропуснат.
• throttling: Конфигурирайте настройките за ограничаване на мрежата, за да симулирате различни мрежови условия.
• formFactor: Посочете форм-фактора (десктоп или мобилен), който да се емулира.
• screenEmulation: Конфигурирайте настройките за емулация на екрана.

За да персонализирате конфигурацията на Lighthouse, можете да подадете флаг --config-path на командата lhci autorun, сочещ към персонализиран конфигурационен файл на Lighthouse. Обърнете се към документацията на Lighthouse за пълен списък с опции за конфигурация.

4. Одит на страници, изискващи автентикация

Одитът на страници, изискващи автентикация, изисква малко по-различен подход. Трябва да предоставите на Lighthouse CI начин за автентикация, преди да изпълни одитите. Това може да бъде постигнато чрез бисквитки или чрез скриптиране на процеса на влизане.

Един често срещан подход е да се използва флагът --extra-headers за предаване на бисквитки за автентикация на Lighthouse CI. Можете да получите бисквитките от инструментите за разработчици на вашия браузър, след като влезете в уебсайта.

Алтернативно, можете да използвате Puppeteer скрипт, за да автоматизирате процеса на влизане и след това да изпълните одитите на Lighthouse на автентикираните страници. Този подход осигурява повече гъвкавост и ви позволява да се справите със сложни сценарии за автентикация.Най-добри практики за тестване на производителността на фронтенда с Lighthouse CI

За да извлечете максимална полза от Lighthouse CI, следвайте тези най-добри практики:

• Изпълнявайте Lighthouse CI редовно: Интегрирайте Lighthouse CI във вашия CI/CD процес, за да изпълнявате одити автоматично с всеки къмит или pull request. Това гарантира, че регресиите в производителността се откриват рано и се отстраняват своевременно.
• Задавайте реалистични бюджети за производителност: Дефинирайте бюджети за производителност, които са предизвикателни, но постижими. Започнете с консервативни бюджети и постепенно ги затягайте, докато производителността на вашия уебсайт се подобрява. Обмислете задаването на различни бюджети за различни типове страници, в зависимост от тяхната сложност и важност.
• Фокусирайте се върху ключови метрики: Приоритизирайте ключовите метрики за производителност, които имат най-голямо въздействие върху потребителското изживяване и бизнес резултатите. Core Web Vitals на Google (LCP, FID и CLS) са добра отправна точка.
• Разследвайте и решавайте проблеми с производителността: Когато Lighthouse CI идентифицира проблеми с производителността, разследвайте ги щателно и прилагайте подходящи решения. Използвайте докладите на Lighthouse, за да идентифицирате основните причини за проблемите и да приоритизирате най-въздействащите корекции.
• Наблюдавайте производителността във времето: Проследявайте метриките за производителност във времето, за да идентифицирате тенденции и модели. Използвайте сървъра на Lighthouse CI или други инструменти за наблюдение, за да визуализирате данните за производителността и да идентифицирате области за подобрение.
• Обучавайте екипа си: Уверете се, че вашият екип разбира значението на производителността на фронтенда и как да използва Lighthouse CI ефективно. Осигурете обучение и ресурси, за да им помогнете да подобрят своите умения и знания.
• Вземете предвид глобалните мрежови условия: Когато задавате бюджети за производителност, вземете предвид мрежовите условия в различни части на света. Потребителите в райони с по-ниска скорост на интернет може да имат различно изживяване от потребителите в райони с по-висока скорост. Използвайте инструменти за симулиране на различни мрежови условия по време на тестване.
• Оптимизирайте изображенията: Оптимизацията на изображенията е критичен аспект на производителността на фронтенда. Използвайте инструменти като ImageOptim, TinyPNG или онлайн конвертори, за да компресирате и оптимизирате изображенията без загуба на качество. Използвайте съвременни формати на изображения като WebP, които предлагат по-добра компресия и качество от традиционните формати като JPEG и PNG. Приложете отложено зареждане (lazy loading) за изображения, които не са веднага видими в прозореца за преглед.
• Минифицирайте и компресирайте кода: Минифицирайте вашия HTML, CSS и JavaScript код, за да намалите размера на файловете. Използвайте инструменти като UglifyJS, Terser или онлайн минификатори. Активирайте Gzip или Brotli компресия на вашия сървър, за да намалите допълнително размера на прехвърлените файлове.
• Използвайте кеширане в браузъра: Конфигурирайте сървъра си да задава подходящи заглавки за кеширане (cache headers) за статични активи като изображения, CSS и JavaScript файлове. Това позволява на браузърите да кешират тези активи и да избягват повторното им изтегляне.

Заключение

Интегрирането на Lighthouse CI във вашия работен процес е решаваща стъпка към изграждането на високопроизводителни, достъпни и SEO-оптимизирани уебсайтове. Чрез автоматизиране на тестването на производителността на фронтенда и проследяване на производителността във времето можете да идентифицирате и решавате проблеми с производителността на ранен етап, да подобрите потребителското изживяване и да постигнете по-добри бизнес резултати. Възприемете Lighthouse CI и превърнете непрекъснатото подобряване на производителността в основна ценност на вашия процес на разработка. Помнете, че производителността на уебсайта не е еднократно усилие, а постоянен процес, който изисква непрекъснато внимание и оптимизация. Вземете предвид културните и регионалните фактори, за да осигурите безпроблемно изживяване за всички ваши потребители, независимо от тяхното местоположение или устройство. Като следвате най-добрите практики, описани в тази статия, можете да гарантирате, че вашият уебсайт предоставя бързо, надеждно и приятно изживяване на потребителите по целия свят.